// Bootstrap Select

$bootstrap-select: (
    padding: (
        item: 7px 15px,
        title: 7px 15px
    )
);

.bootstrap-select {
    > .dropdown-toggle {
        position: relative;
        outline: none !important;
        padding: $input-btn-padding-y $input-btn-padding-x;

        @include e-rounded {
            border-radius: $input-border-radius !important;
        }

        &:focus {
            outline: none !important;
        }

        &:after {
            border: 0;
            margin-right: -2px;
            margin-top: 2px;
            font-size: .6rem;
            //right: ($input-btn-padding-x);
            display: inline-block;

            //@include e-arrow-icon(down, true);
            @include e-flaticon2-icon('\f1b1');
        }

        &:before {
            width: auto;
        }
    }

    .dropdown-menu.inner {
        display: block;

        > li {
            > a {
                display: block;
                position: relative;
                outline: none !important;
                padding: e-get($bootstrap-select, padding, item);

                &:hover {
                    text-decoration: none;
                }

                // icons
                @include e-icons-size((fontawesome: 1.2rem, lineawesome: 1.2rem, flaticon: 1.1rem));

                i {
                    vertical-align: middle;
                }
            }

            &.selected {
                > a {
                    span.check-mark {
                        @include e-la-icon('\f17b');
                        top: 50%;
                        position: absolute;
                        margin-top: - (.85rem / 2);
                        font-size: .85rem;
                        right: $input-btn-padding-x;
                        display: inline-block;

                        &:after {
                            display: none;
                        }
                    }
                }
            }

            &.divider {
                margin: 10px 0;
            }

            &.hidden {
                display: none;
            }

            &.no-results {
                padding: e-get($bootstrap-select, padding, item);
            }
        }
    }

    .popover-title {
        padding: e-get($bootstrap-select, padding, title);
        margin-bottom: 5px;

        .close {
            display: none;
        }
    }

    .bs-searchbox,
    .bs-actionsbox,
    .bs-donebutton {
        padding: e-get($bootstrap-select, padding, title);
    }

    // skin

    // dropdown button
    > .dropdown-toggle {

        &.btn-light,
        &.btn-secondary {
            background: #fff;
            color: $input-plaintext-color;
            border-color: $input-border-color;
            box-shadow: none;

            &:focus,
            &.active {
                background-color: transparent;
                border-color: $input-focus-border-color;
            }

            &.disabled,
            &:disabled {
                background: $input-disabled-bg;
                border-color: $input-disabled-bg
            }

            .filter-option {
                @include e-icons {
                    color: e-base-color(label, 2);
                }
            }
        }

        &.bs-placeholder {
            color: $input-placeholder-color;

            // state colors
            @each $name, $color in $e-state-colors {
                &.btn-#{$name} {
                    color: e-get($color, inverse);

                    > .filter-option {
                        opacity: .8;
                    }
                }
            }
        }
        .filter-option-inner-inner {
            height: 19px;
        }
    }

    // menu shown state
    &.show {
        > .dropdown-toggle {
            &.btn-light,
            &.btn-secondary {
                border-color: $input-focus-border-color;
                box-shadow: none;
            }
        }
    }

    // Validation
    &.is-invalid {
        .btn.dropdown-toggle {
            border-color: e-state-color(danger, base);
        }
    }

    &.is-valid {
        .btn.dropdown-toggle {
            border-color: e-state-color(success, base);
        }
    }

    // menu dropdown
    .dropdown-menu.inner {
        > li {
            > a {
                .text {
                    color: e-base-color(label, 3);

                    small {
                        color: e-base-color(label, 1);
                    }
                }

                span.check-mark {
                    color: e-base-color(label, 2);
                }

                @include e-icons {
                    color: e-base-color(label, 1);
                }
            }

            &.selected,
            &:hover {
                > a {
                    background: e-base-color(grey, 1);

                    .text {
                        color: e-base-color(label, 3);
                    }

                    @include e-icons {
                        color: e-base-color(label, 1);
                    }

                    span.check-mark {
                        color: e-base-color(label, 2);
                    }
                }
            }

            &.dropdown-header {
                color: e-base-color(label, 2);
            }

            &.selected {
                > a {
                    background: e-base-color(grey, 1);
                }
            }

            &.disabled {
                > a {
                    opacity: .6;
                }
            }

            &.divider {
                border-bottom: 1px solid e-base-color(grey, 1);
            }

            &.active:not(.selected) {
                > a {
                    background: e-state-color(brand, base);

                    .text {
                        color: e-state-color(brand, inverse);
                    }

                    @include e-icons {
                        color: e-state-color(brand, inverse);
                    }

                    span.check-mark {
                        color: e-state-color(brand, inverse);
                    }
                }
            }

            &.no-results {
                color: e-base-color(label, 2);
            }
        }
    }

    // menu header
    .popover-title {
        background: e-base-color(grey, 1);
        border: 0;
    }

    .dropdown-menu {
        margin-top: 1px;
    }
}